<template>
  <Drawer title="智能烘干" :show="show" @close="closeDrawer">
    <view class="smart-drying-options">
      <view v-for="option in options" class="option-item" :key="option.value" @click="selectOption(option.value)">
        <view class="radio" :class="{ selected: option.value === storedValue }"></view>
        <view class="label">
          <view class="title">{{ option.title }}</view>
          <view class="desc">{{ option.desc }}</view>
        </view>
      </view>
    </view>

    <template #footer>
      <TextButton :disabled="storedValue === null" @click="confirm">{{ $t('APP.Common.Define.Text') }}</TextButton>
    </template>
  </Drawer>
</template>

<script setup lang="ts">
import type { DISHWASHER_DRYINGASSISTANT_PROGRAMS } from '@/constants/Command'
import Drawer from '@/common/drawer.vue'
import { options } from './useSmartDrying'
import TextButton from '@/common/textButton.vue'

const props = defineProps<{
  show: boolean
  value: DISHWASHER_DRYINGASSISTANT_PROGRAMS | null
}>()

const emit = defineEmits<{
  (e: 'update:show', show: boolean): void
  (e: 'close'): void
  (e: 'confirm', value: DISHWASHER_DRYINGASSISTANT_PROGRAMS, onComplete: () => void): void
}>()

const storedValue = ref<DISHWASHER_DRYINGASSISTANT_PROGRAMS | null>(null)
watch(
  () => props.show,
  () => {
    storedValue.value = props.value
  }
)

function closeDrawer() {
  emit('update:show', false)
  emit('close')
}
function selectOption(value: DISHWASHER_DRYINGASSISTANT_PROGRAMS) {
  storedValue.value = value
}

function confirm() {
  emit('confirm', storedValue.value as DISHWASHER_DRYINGASSISTANT_PROGRAMS, () => {
    closeDrawer()
  })
}
</script>

<style lang="less">
.option-item {
  padding: 30rpx 0;
  display: flex;
  .radio {
    width: 36rpx;
    height: 36rpx;
    border: 2rpx solid #4475d5;
    border-radius: 50%;
    margin-top: 8rpx;
    margin-right: 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    &.selected::before {
      content: '';
      display: block;
      width: 24rpx;
      height: 24rpx;
      border-radius: 50%;
      background: #4475d5;
    }
  }
  .label {
    flex: 1;
    .title {
      font-weight: 400;
      font-size: 36rpx;
      line-height: 50rpx;
      color: #000000;
    }
    .desc {
      font-weight: 400;
      font-size: 24rpx;
      line-height: 34rpx;
      color: #5d5d5d;
    }
  }
}
</style>
